<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>物资入库申请</title>

		<link rel="stylesheet" href="../css/index.css">
		<script src="../js/vue.min.js"></script>
		<script src="../js/elementui.js"></script>
		<script src="../js/axios.min.js"></script>
		<script src="../js/mycommon.js"></script>

	</head>

	<body>

		<div id="app">

			<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px">
				<el-form-item label="物资名称" prop="materialname">
					<el-input v-model="formData.materialname" placeholder="请输入物资名称" clearable :style="{width: '100%'}">
					</el-input>
				</el-form-item>
				<el-form-item label="物资所属品类" prop="field105">
					<el-cascader v-model="formData.field105" :options="field105Options"
						:props="{ 'value':'id','label': 'materialname' }" :style="{width: '100%'}"
						placeholder="请选择物资所属品类" clearable @change="handleEdit"></el-cascader>
				</el-form-item>
				<el-form-item label="物资编码" prop="codematerial">
					<el-input v-model="formData.codematerial" placeholder="物资编码" readonly clearable
						:style="{width: '100%'}"></el-input>
				</el-form-item>

				<el-form-item label="备注" prop="remark">
					<el-input v-model="formData.remark" placeholder="请输入备注" clearable
						:style="{width: '100%'}"></el-input>
				</el-form-item>
				<el-form-item size="large">
					<el-button type="primary" @click="submitForm">提交</el-button>
					<el-button @click="resetForm">重置</el-button>
				</el-form-item>
			</el-form>

		</div>

		<script>
			var vue = new Vue({
				components: {},
				props: [],
				el: "#app",
				data: {
					warehouseidOptions: [],
					formData: {
						mmaterialname: "",
						field105: [],
						codematerial: undefined,
						remark: undefined,
					},
					rules: {
						materialname: [{
							required: true,
							message: '请输入物资名称',
							trigger: 'blur'
						}],
						field105: [{
							required: true,
							type: 'array',
							message: '请至少选择一个物资所属品类',
							trigger: 'change'
						}],
						codematerial: [{
							required: true,
							message: '请输入物资编码',
							trigger: 'blur'
						}],

						remark: [],
					},
					field105Options: [],

				},
				computed: {},
				watch: {},
				created() {},
				mounted() {

					this.getCode()
				},
				methods: {
					submitForm() {
						// alert(JSON.stringify(this.formData));
						this.formData.warehouseid = this.formData.warehouseidall[0].replaceAll("a", "")
						this.formData.areaid = this.formData.warehouseidall[1].replaceAll("b", "")
						this.formData.shelves = this.formData.warehouseidall[2].replaceAll("c", "")

						//alert(JSON.stringify(this.formData));
						//数据提交
						var that = this
						axios.post("http://localhost:8080/storage/addsto",
							this.formData
						).then(function(res) {
							//alert(JSON.stringify(res));
							if (res.data.code == 200) {
								//提交
								that.$message('提交成功')
								that.initdata()
							}

						}).catch(err => {
							console.log(err)
						});
					},
					resetForm() {
						this.$refs['elForm'].resetFields()
					},

					getCode() {
						//获取物资分类信息
						var that = this
						axios.post("http://localhost:8080/code/category").then(function(res) {
							//alert(JSON.stringify(res.data.data.list));
							let jsontree = arrayToTree3(res.data.data.list)
							//alert(JSON.stringify(jsontree));
							that.field105Options = jsontree
						}).catch(err => {
							console.log(err)
						});
					},
					handleEdit(v) {
						//物资编码生成
						let codematerialid = v[1];
						var that = this
						axios.post("http://localhost:8080/code/codematerialid", {
							"id": codematerialid
						}).then(function(res) {
							//alert(JSON.stringify(res.data.data.list));
							that.formData.codematerial = res.data.data.list
						}).catch(err => {
							console.log(err)
						});
					}
				}
			})
		</script>

	</body>

</html>